<template>
    <div class="page-container">
        <div class="btn">
            <el-button @click="searchPerson">查询数据</el-button>
            <el-button @click="editPerson">编辑数据</el-button>
            <el-button @click="batchDeletePerson">批量删除数据</el-button>
        </div>
        <div class="table-box">
            <vxe-table border show-header-overflow show-overflow auto-resize height="auto" highlight-hover-row
                       highlight-current-row keep-source ref="xTable"
                       :edit-config="{trigger: 'click', mode: 'cell',showStatus:true,showIcon:false}"
                       header-align="center" align="center"
                       :data="tableData">
                <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                <vxe-table-column type="checkbox" width="60"></vxe-table-column>
                <vxe-table-column field="user_id" title="ID" align="left" header-align="center"></vxe-table-column>
                <vxe-table-column field="user_name" title="姓名" align="left" header-align="center"></vxe-table-column>
                <vxe-table-column field="user_pwd" title="密码" align="left" header-align="center"></vxe-table-column>
                <vxe-table-column field="user_role" title="权重"
                                  :edit-render="{name: '$select', options: roleOptions, optionProps: {value: 'id', label: 'label'}}">
                    <!--<template v-slot="{ row }">-->
                    <!--<div v-if="row.user_role===0">超级管理员</div>-->
                    <!--<div v-else-if="row.user_role===1">普通管理员</div>-->
                    <!--<div v-else>普通用户</div>-->
                    <!--</template>-->
                </vxe-table-column>
                <vxe-table-column title="删除">
                    <template v-slot="{ row }">
                        <div v-if="row.user_role===0">超级管理员</div>
                        <div v-else-if="row.user_role===1&&userRole===1">管理员</div>
                        <el-button v-else @click="handleClick(row)" type="text" size="mini">删除
                        </el-button>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="createTime" title="注册时间">
                    <template v-slot="{ row }">
                        <div>{{getFormatTime(row.createTime)}}</div>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';
    import Service from '../../../common/Service';
    import {mapState} from 'vuex';

    export default {
        name: "RoleManage",
        data() {
            return {
                tableData: [],
                userRole: -1,
                roleOptions: [{
                    id: "0",
                    name: "superManager",
                    label: "超级管理员"
                }, {
                    id: "1",
                    name: "Manager",
                    label: "普通管理员"
                }, {
                    id: "2",
                    name: "Users",
                    label: "普通用户"
                }]
            }
        },
        computed: mapState(["user"]),
        mounted() {
            this.searchPerson();
            this.userRole = this.user.user_role;
        },
        methods: {
            getFormatTime(value) {
                return moment(value).format("YYYY-MM-DD HH:mm:ss");
            },
            handleClick(e) {
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 删除对应的用户
                    Service.base.delUser(e.user_id).then(data => {
                        this.searchPerson();
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            searchPerson() {
                Service.base.searchUsers().then(data => {
                    console.log(data)
                    // FIXME 数据根据权重和注册时间排序
                    this.tableData = data;
                })
            },
            editPerson() {
                console.log("是否确认编辑数据")
            },
            batchDeletePerson() {
                let selectRecords = this.$refs.xTable.getCheckboxRecords();
                if (selectRecords.length === 0) {
                    this.$message("请至少选择一条记录");
                    return;
                }
                /**
                 * 将要删除的记录的id存放在ids数组
                 * @type {Array}
                 */
                let ids = [];
                let i = 0;
                switch (this.userRole) {
                    case 0:
                        selectRecords.forEach(item => {
                            ids.push(item.user_id);
                            if (item.user_role === 0) {
                                i += 1;
                            }
                        });
                        i === 0 ? this.batchDelete(ids) : this.$message.error('有超级管理员，请重新选择！');
                        break;
                    case 1:
                        selectRecords.forEach(item => {
                            ids.push(item.user_id);
                            if (item.user_role === 1 || item.user_role === 0) {
                                i += 1;
                            }
                        });
                        i === 0 ? this.batchDelete(ids) : this.$message.error('有超级管理员或普通管理员，请重新选择！');
                        break;
                }
            },
            batchDelete(ids) {
                this.$confirm('此操作将永久删除该用户及其相关个人数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 批量删除对应的用户
                    Service.base.batchDeleteUsers(ids).then(data => {
                        this.searchPerson();
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .page-container {
        width: 100%;
        height: 100%;
        .btn {
            width: 100%;
            height: 40px;
        }
        .table-box {
            width: 100%;
            height: calc(100% - 40px);
        }
    }
</style>